<template>
  <div class="traffic-page">
    <el-card class="page-container">
      <template #header>
        <div class="card-header">
          <span>流量统计</span>
        </div>
      </template>
      
      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon traffic">
                <el-icon><View /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.totalTraffic }}</div>
                <div class="stat-label">总流量</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon reply">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.totalReply }}</div>
                <div class="stat-label">总回复</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon invite">
                <el-icon><Bell /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.totalInvite }}</div>
                <div class="stat-label">总邀课</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon registration">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.totalRegistration }}</div>
                <div class="stat-label">总报名</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 图表区域 -->
      <el-row :gutter="20" class="charts-row">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>流量来源分布</span>
              </div>
            </template>
            <div ref="sourceChart" class="chart-container"></div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>转化率趋势</span>
              </div>
            </template>
            <div ref="conversionChart" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 流量统计表格 -->
      <el-card class="table-card">
        <template #header>
          <div class="card-header">
            <span>流量统计明细</span>
          </div>
        </template>
        
        <el-table
          :data="tableData"
          v-loading="loading"
          class="table-container"
          stripe
        >
          <el-table-column prop="reception_employee" label="接待员工" width="120" />
          <el-table-column prop="region_name" label="地区" width="100" />
          <el-table-column prop="subject_name" label="科目" width="100" />
          <el-table-column prop="team_name" label="团队" width="120" />
          <el-table-column prop="traffic_channel" label="渠道" width="100" />
          <el-table-column prop="traffic_count" label="流量数量" width="100" />
          <el-table-column prop="reply_count" label="回复数量" width="100" />
          <el-table-column prop="invite_count" label="邀课数量" width="100" />
          <el-table-column prop="reply_rate" label="回复率" width="100">
            <template #default="{ row }">
              {{ row.reply_rate }}%
            </template>
          </el-table-column>
          <el-table-column prop="invite_rate" label="邀课率" width="100">
            <template #default="{ row }">
              {{ row.invite_rate }}%
            </template>
          </el-table-column>
          <el-table-column prop="new_registration_count" label="新报名" width="100" />
          <el-table-column prop="statistics_date" label="统计日期" width="160" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const loading = ref(false)

const stats = ref({
  totalTraffic: 1256,
  totalReply: 892,
  totalInvite: 456,
  totalRegistration: 234
})

const tableData = ref([
  {
    reception_employee: '张三',
    region_name: '北京',
    subject_name: 'Python',
    team_name: 'Python团队',
    traffic_channel: '抖音',
    traffic_count: 50,
    reply_count: 35,
    invite_count: 20,
    reply_rate: 70.0,
    invite_rate: 40.0,
    new_registration_count: 8,
    statistics_date: '2024-01-15'
  },
  {
    reception_employee: '李四',
    region_name: '上海',
    subject_name: 'Java',
    team_name: 'Java团队',
    traffic_channel: '微信',
    traffic_count: 45,
    reply_count: 30,
    invite_count: 18,
    reply_rate: 66.7,
    invite_rate: 40.0,
    new_registration_count: 6,
    statistics_date: '2024-01-15'
  }
])

const sourceChart = ref<HTMLElement>()
const conversionChart = ref<HTMLElement>()

onMounted(() => {
  initCharts()
})

const initCharts = () => {
  // 流量来源分布图
  if (sourceChart.value) {
    const sourceChartInstance = echarts.init(sourceChart.value)
    const sourceOption = {
      tooltip: {
        trigger: 'item'
      },
      series: [{
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '抖音' },
          { value: 310, name: '微信' },
          { value: 234, name: '百度' },
          { value: 135, name: '朋友推荐' },
          { value: 118, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    }
    sourceChartInstance.setOption(sourceOption)
  }
  
  // 转化率趋势图
  if (conversionChart.value) {
    const conversionChartInstance = echarts.init(conversionChart.value)
    const conversionOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: [{
        data: [15.2, 16.8, 18.5, 17.2, 19.1, 20.3],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#67c23a'
        }
      }]
    }
    conversionChartInstance.setOption(conversionOption)
  }
}
</script>

<style lang="scss" scoped>
.traffic-page {
  .card-header {
    font-weight: bold;
  }
  
  .stats-row {
    margin-bottom: 20px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
          font-size: 24px;
          color: white;
          
          &.traffic {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.reply {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
          
          &.invite {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.registration {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }
        
        .stat-info {
          .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
          }
          
          .stat-label {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
  }
  
  .charts-row {
    margin-bottom: 20px;
    
    .chart-card {
      .chart-container {
        height: 300px;
      }
    }
  }
  
  .table-card {
    .table-container {
      margin-top: 20px;
    }
  }
}
</style>
